<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI心动匹配系统</title>
    <style>
        :root {
            --primary: #FF4D6D;
            --secondary: #FF8FA3;
            --dark: #2B2D42;
            --light: #F8F9FA;
            --accent: #FFD166;
            --shadow: 0 10px 20px rgba(0,0,0,0.1);
            --transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #FFF0F3 0%, #FFCCD5 100%);
            color: var(--dark);
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
        }
        
        /* 心形浮动背景元素 */
        .heart-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }
        
        .heart {
            position: absolute;
            background: rgba(255, 77, 109, 0.1);
            border-radius: 50%;
            filter: blur(5px);
            animation: float 15s infinite linear;
        }
        
        @keyframes float {
            0% { transform: translateY(0) rotate(0deg); opacity: 0; }
            10% { opacity: 0.3; }
            90% { opacity: 0.3; }
            100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
        }
        
        /* 导航栏 */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            margin-bottom: 30px;
            position: relative;
        }
        
        .logo {
            font-size: 28px;
            font-weight: 700;
            color: var(--primary);
            display: flex;
            align-items: center;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }
        
        .logo i {
            margin-right: 12px;
            font-size: 32px;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        nav ul {
            display: flex;
            list-style: none;
            gap: 25px;
        }
        
        nav ul li a {
            text-decoration: none;
            color: var(--dark);
            font-weight: 500;
            font-size: 18px;
            padding: 8px 16px;
            border-radius: 30px;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }
        
        nav ul li a::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--primary);
            transition: var(--transition);
            transform: translateX(-50%);
        }
        
        nav ul li a:hover::before,
        nav ul li a.active::before {
            width: 70%;
        }
        
        nav ul li a:hover,
        nav ul li a.active {
            color: var(--primary);
        }
        
        /* 主页面 */
        .page {
            display: none;
            animation: fadeIn 0.8s ease-out;
        }
        
        .page.active {
            display: block;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 首页样式 */
        .hero {
            text-align: center;
            padding: 80px 0 60px;
            position: relative;
        }
        
        .hero h1 {
            font-size: 64px;
            margin-bottom: 20px;
            color: var(--primary);
            text-shadow: 3px 3px 0 rgba(0,0,0,0.05);
            line-height: 1.2;
        }
        
        .hero p {
            font-size: 22px;
            color: var(--dark);
            max-width: 700px;
            margin: 0 auto 50px;
            line-height: 1.6;
        }
        
        .cta-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            color: white;
            padding: 18px 36px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 20px;
            transition: var(--transition);
            box-shadow: 0 10px 20px rgba(255, 77, 109, 0.3);
            border: none;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        
        .cta-button:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(255, 77, 109, 0.4);
        }
        
        .cta-button i {
            margin-left: 10px;
            transition: var(--transition);
        }
        
        .cta-button:hover i {
            transform: translateX(5px);
        }
        
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 80px;
        }
        
        .feature-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 40px 30px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }
        
        .feature-card i {
            font-size: 48px;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin-bottom: 25px;
            display: block;
        }
        
        .feature-card h3 {
            font-size: 24px;
            margin-bottom: 20px;
            color: var(--primary);
        }
        
        /* 表单页面 */
        .form-container {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border-radius: 25px;
            padding: 50px;
            box-shadow: var(--shadow);
            border: 1px solid rgba(255, 255, 255, 0.3);
            position: relative;
            overflow: hidden;
        }
        
        .form-container::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,77,109,0.1) 0%, rgba(255,255,255,0) 70%);
            z-index: -1;
            animation: rotate 20s linear infinite;
        }
        
        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .form-container h2 {
            text-align: center;
            margin-bottom: 40px;
            color: var(--primary);
            font-size: 32px;
            position: relative;
            display: inline-block;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .form-container h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--primary), transparent);
        }
        
        .form-group {
            margin-bottom: 30px;
            position: relative;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 12px;
            font-weight: 500;
            color: var(--dark);
            font-size: 18px;
        }
        
        .form-control {
            width: 100%;
            padding: 16px 20px;
            border: 2px solid #e9ecef;
            border-radius: 12px;
            font-size: 16px;
            transition: var(--transition);
            background: rgba(255,255,255,0.8);
        }
        
        .form-control:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 4px rgba(255, 77, 109, 0.2);
        }
        
        .form-row {
            display: flex;
            gap: 25px;
        }
        
        .form-row .form-group {
            flex: 1;
        }
        
        .submit-btn {
            width: 100%;
            padding: 18px;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            margin-top: 20px;
            box-shadow: 0 5px 15px rgba(255, 77, 109, 0.3);
            position: relative;
            overflow: hidden;
        }
        
        .submit-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(255, 77, 109, 0.4);
        }
        
        .submit-btn::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: rgba(255,255,255,0.1);
            transform: rotate(45deg);
            transition: var(--transition);
        }
        
        .submit-btn:hover::after {
            left: 100%;
        }
        
        /* 弹窗样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(5px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: all 0.5s ease;
        }
        
        .modal-overlay.active {
            opacity: 1;
            pointer-events: all;
        }
        
        .modal-container {
            background: white;
            border-radius: 25px;
            width: 90%;
            max-width: 700px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 20px 50px rgba(0,0,0,0.3);
            transform: scale(0.8);
            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            position: relative;
            opacity: 0;
        }
        
        .modal-overlay.active .modal-container {
            transform: scale(1);
            opacity: 1;
        }
        
        .modal-header {
            padding: 25px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            color: white;
            border-radius: 25px 25px 0 0;
        }
        
        .modal-header h2 {
            font-size: 28px;
            display: flex;
            align-items: center;
        }
        
        .modal-header h2 i {
            margin-right: 15px;
        }
        
        .close-modal {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .close-modal:hover {
            transform: rotate(90deg);
        }
        
        .modal-content {
            padding: 30px;
            line-height: 1.8;
        }
        
        .modal-content h3 {
            color: var(--primary);
            margin: 20px 0 15px;
            font-size: 22px;
            position: relative;
            padding-left: 15px;
        }
        
        .modal-content h3::before {
            content: '';
            position: absolute;
            left: 0;
            top: 5px;
            height: 70%;
            width: 5px;
            background: var(--primary);
            border-radius: 5px;
        }
        
        .modal-content ul {
            margin: 15px 0 15px 20px;
        }
        
        .modal-content ul li {
            margin-bottom: 10px;
            position: relative;
            padding-left: 20px;
        }
        
        .modal-content ul li::before {
            content: '❤';
            position: absolute;
            left: 0;
            color: var(--primary);
        }
        
        .match-percentage {
            text-align: center;
            margin: 30px 0;
            position: relative;
        }
        
        .percentage-circle {
            width: 150px;
            height: 150px;
            margin: 0 auto;
            border-radius: 50%;
            background: conic-gradient(var(--primary) 0% 75%, #eee 75% 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 10px 30px rgba(255, 77, 109, 0.3);
            position: relative;
        }
        
        .percentage-circle::before {
            content: '';
            position: absolute;
            width: 130px;
            height: 130px;
            background: white;
            border-radius: 50%;
        }
        
        .percentage-value {
            position: relative;
            font-size: 36px;
            font-weight: 700;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .modal-footer {
            padding: 20px;
            text-align: center;
            border-top: 1px solid #eee;
        }
        
        .modal-btn {
            padding: 12px 30px;
            border-radius: 50px;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            color: white;
            border: none;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 5px 15px rgba(255, 77, 109, 0.3);
        }
        
        .modal-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(255, 77, 109, 0.4);
        }
        
        /* 加载动画 */
        .loading {
            text-align: center;
            display: none;
            margin: 50px 0;
        }
        
        .heart-loader {
            width: 50px;
            height: 50px;
            margin: 0 auto 20px;
            position: relative;
            animation: heartbeat 1.5s infinite;
        }
        
        @keyframes heartbeat {
            0% { transform: scale(1); }
            25% { transform: scale(1.1); }
            50% { transform: scale(1); }
            75% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        .heart-loader::before,
        .heart-loader::after {
            content: '';
            position: absolute;
            top: 0;
            width: 26px;
            height: 40px;
            background: var(--primary);
            border-radius: 25px 25px 0 0;
        }
        
        .heart-loader::before {
            left: 26px;
            transform: rotate(-45deg);
            transform-origin: 0 100%;
        }
        
        .heart-loader::after {
            left: 0;
            transform: rotate(45deg);
            transform-origin: 100% 100%;
        }
        
        /* 历史记录页面 */
        .history-container {
            max-width: 1000px;
            margin: 0 auto;
        }
        
        .history-item {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 25px;
            box-shadow: var(--shadow);
            margin-bottom: 25px;
            transition: var(--transition);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .history-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        }
        
        .history-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .history-title {
            font-size: 20px;
            color: var(--primary);
            display: flex;
            align-items: center;
        }
        
        .history-title i {
            margin-right: 10px;
        }
        
        .history-date {
            font-size: 14px;
            color: #888;
        }
        
        .history-preview {
            display: flex;
            gap: 15px;
            margin-top: 15px;
        }
        
        .history-preview-item {
            background: rgba(255, 77, 109, 0.1);
            padding: 8px 15px;
            border-radius: 50px;
            font-size: 14px;
            color: var(--primary);
        }
        
        .view-detail-btn {
            background: none;
            border: none;
            color: var(--primary);
            font-weight: 600;
            cursor: pointer;
            margin-top: 15px;
            display: flex;
            align-items: center;
            transition: var(--transition);
        }
        
        .view-detail-btn i {
            margin-left: 8px;
            transition: var(--transition);
        }
        
        .view-detail-btn:hover {
            color: var(--secondary);
        }
        
        .history-detail {
            display: none;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #eee;
            animation: fadeIn 0.5s ease-out;
        }
        
        .no-history {
            text-align: center;
            padding: 80px;
            color: #888;
            font-size: 18px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            box-shadow: var(--shadow);
        }
        
        .no-history i {
            font-size: 50px;
            margin-bottom: 20px;
            color: var(--primary);
            opacity: 0.5;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 42px;
            }
            
            .hero p {
                font-size: 18px;
            }
            
            .form-row {
                flex-direction: column;
                gap: 0;
            }
            
            nav ul {
                gap: 15px;
            }
            
            .modal-header h2 {
                font-size: 22px;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <!-- 心形背景元素 -->
    <div class="heart-bg" id="heart-bg"></div>
    
    <div class="container">
        <header>
            <div class="logo">
                <i class="fas fa-heart"></i>
                <span>AI心动匹配</span>
            </div>
            <nav>
                <ul>
                    <li><a href="#" class="nav-link active" data-page="home">首页</a></li>
                    <li><a href="#" class="nav-link" data-page="start">开始匹配</a></li>
                    <li><a href="#" class="nav-link" data-page="history">匹配记录</a></li>
                </ul>
            </nav>
        </header>
        
        <!-- 首页 -->
        <div class="page active" id="home">
            <section class="hero">
                <h1>遇见你的<span style="color: var(--primary);">命中注定</span></h1>
                <p>基于深度学习的AI匹配系统，通过分析你的个性、价值观和生活方式，为你找到最契合的灵魂伴侣</p>
                <button class="cta-button start-match-btn">
                    开始匹配 <i class="fas fa-arrow-right"></i>
                </button>
            </section>
            
            <section class="features">
                <div class="feature-card">
                    <i class="fas fa-brain"></i>
                    <h3>智能AI分析</h3>
                    <p>采用最先进的深度学习算法，从多维角度分析你的性格特征和情感需求，找到真正适合你的伴侣。</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-chart-line"></i>
                    <h3>高精准匹配</h3>
                    <p>基于心理学研究的匹配模型，匹配准确率高达92%，远超传统相亲方式。</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-user-shield"></i>
                    <h3>隐私保护</h3>
                    <p>端到端加密技术保障你的信息安全，所有数据仅用于匹配分析。</p>
                </div>
            </section>
        </div>
        
        <!-- 开始匹配页面 -->
        <div class="page" id="start">
            <div class="form-container">
                <h2><i class="fas fa-heart"></i> 心动匹配问卷</h2>
                <form id="match-form">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="gender"><i class="fas fa-venus-mars"></i> 你的性别</label>
                            <select class="form-control" id="gender" required>
                                <option value="">请选择</option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                                <option value="其他">其他</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="age"><i class="fas fa-birthday-cake"></i> 你的年龄</label>
                            <input type="number" class="form-control" id="age" min="18" max="100" required>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="education"><i class="fas fa-graduation-cap"></i> 教育背景</label>
                        <select class="form-control" id="education" required>
                            <option value="">请选择</option>
                            <option value="高中及以下">高中及以下</option>
                            <option value="大专">大专</option>
                            <option value="本科">本科</option>
                            <option value="硕士">硕士</option>
                            <option value="博士">博士</option>
                        </select>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="income"><i class="fas fa-money-bill-wave"></i> 年收入范围</label>
                            <select class="form-control" id="income" required>
                                <option value="">请选择</option>
                                <option value="10万以下">10万以下</option>
                                <option value="10-20万">10-20万</option>
                                <option value="20-50万">20-50万</option>
                                <option value="50-100万">50-100万</option>
                                <option value="100万以上">100万以上</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="city"><i class="fas fa-city"></i> 居住城市</label>
                            <input type="text" class="form-control" id="city" required>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="hobbies"><i class="fas fa-heart"></i> 兴趣爱好 (用逗号分隔)</label>
                        <input type="text" class="form-control" id="hobbies" placeholder="例如: 旅行,阅读,健身,美食">
                    </div>
                    
                    <div class="form-group">
                        <label for="personality"><i class="fas fa-brain"></i> 描述你的性格特点</label>
                        <textarea class="form-control" id="personality" rows="3" placeholder="例如: 外向开朗,有责任心,喜欢尝试新事物"></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label for="expectation"><i class="fas fa-star"></i> 你期待的伴侣特质</label>
                        <textarea class="form-control" id="expectation" rows="3" placeholder="描述你希望伴侣具备的特质和价值观"></textarea>
                    </div>
                    
                    <button type="submit" class="submit-btn">
                        <i class="fas fa-heartbeat"></i> 开始AI匹配分析
                    </button>
                </form>
            </div>
            
            <div class="loading" id="loading">
                <div class="heart-loader"></div>
                <p>AI正在分析你的信息，为你寻找最佳匹配...</p>
            </div>
        </div>
        
        <!-- 历史记录页面 -->
        <div class="page" id="history">
            <div class="history-container">
                <h2 style="text-align: center; margin-bottom: 40px; color: var(--primary); font-size: 32px;">
                    <i class="fas fa-history"></i> 你的匹配历史记录
                </h2>
                <div id="history-list">
                    <div class="no-history" id="no-history">
                        <i class="fas fa-heart-broken"></i>
                        <p>暂无匹配记录<br>开始你的第一次心动匹配吧！</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 匹配结果弹窗 -->
    <div class="modal-overlay" id="modal-overlay">
        <div class="modal-container">
            <div class="modal-header">
                <h2><i class="fas fa-heart"></i> 匹配结果分析</h2>
                <button class="close-modal" id="close-modal">&times;</button>
            </div>
            <div class="modal-content" id="modal-content">
                <!-- 内容将通过JavaScript动态生成 -->
            </div>
            <div class="modal-footer">
                <button class="modal-btn" id="save-match">
                    <i class="fas fa-bookmark"></i> 保存匹配结果
                </button>
            </div>
        </div>
    </div>
    
    <script>
        // 创建浮动心形背景
        function createHearts() {
            const heartBg = document.getElementById('heart-bg');
            const colors = ['#FF4D6D', '#FF8FA3', '#FFB3C1', '#FFCCD5'];
            
            for (let i = 0; i < 15; i++) {
                const heart = document.createElement('div');
                heart.classList.add('heart');
                
                // 随机大小
                const size = Math.random() * 30 + 10;
                heart.style.width = `${size}px`;
                heart.style.height = `${size}px`;
                
                // 随机颜色
                const color = colors[Math.floor(Math.random() * colors.length)];
                heart.style.backgroundColor = color;
                
                // 随机位置
                heart.style.left = `${Math.random() * 100}%`;
                heart.style.bottom = `-${size}px`;
                
                // 随机动画延迟
                heart.style.animationDelay = `${Math.random() * 15}s`;
                heart.style.animationDuration = `${Math.random() * 10 + 10}s`;
                
                heartBg.appendChild(heart);
            }
        }
        
        // 页面导航
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 更新导航栏活动状态
                document.querySelectorAll('.nav-link').forEach(navLink => {
                    navLink.classList.remove('active');
                });
                this.classList.add('active');
                
                // 隐藏所有页面
                document.querySelectorAll('.page').forEach(page => {
                    page.classList.remove('active');
                });
                
                // 显示当前页面
                const pageId = this.getAttribute('data-page');
                document.getElementById(pageId).classList.add('active');
                
                // 如果是历史记录页面，加载历史记录
                if (pageId === 'history') {
                    loadHistory();
                }
            });
        });
        
        // 首页开始匹配按钮
        document.querySelector('.start-match-btn').addEventListener('click', function() {
            document.querySelectorAll('.nav-link').forEach(navLink => {
                navLink.classList.remove('active');
                if (navLink.getAttribute('data-page') === 'start') {
                    navLink.classList.add('active');
                }
            });
            
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
                if (page.id === 'start') {
                    page.classList.add('active');
                }
            });
        });
        
        // 表单提交
        document.getElementById('match-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 收集表单数据
            const formData = {
                gender: document.getElementById('gender').value,
                age: document.getElementById('age').value,
                education: document.getElementById('education').value,
                income: document.getElementById('income').value,
                city: document.getElementById('city').value,
                hobbies: document.getElementById('hobbies').value,
                personality: document.getElementById('personality').value,
                expectation: document.getElementById('expectation').value,
                timestamp: new Date().toISOString()
            };
            
            // 显示加载动画
            document.getElementById('loading').style.display = 'block';
            
            // 模拟API调用延迟
            setTimeout(() => {
                // 这里应该是实际的API调用
                // 为了示例，我们使用模拟数据
                const matchResult = analyzeMatch(formData);
                
                // 隐藏加载动画
                document.getElementById('loading').style.display = 'none';
                
                // 显示匹配结果弹窗
                showMatchResult(formData, matchResult);
            }, 3000);
        });
        
        // AI分析函数 (模拟)
        function analyzeMatch(formData) {
            // 在实际应用中，这里应该调用DeepSeek API
            // 使用提供的API密钥: sk-c6a7fb0a88f04c45a858716ce9aec15c
            
            // 模拟AI分析结果
            const personalityTraits = formData.personality.split(/[,，、]/).filter(trait => trait.trim() !== '');
            const hobbies = formData.hobbies.split(/[,，、]/).filter(hobby => hobby.trim() !== '');
            
            // 生成匹配百分比 (75-95%之间)
            const matchPercentage = Math.floor(Math.random() * 20) + 75;
            
            // 生成匹配建议
            const suggestions = [];
            
            // 根据个性生成匹配建议
            if (personalityTraits.some(trait => ['外向', '开朗', '活泼'].includes(trait.trim()))) {
                suggestions.push({
                    title: "性格搭配建议",
                    content: "你性格外向，适合与同样外向或稍微内向的伴侣搭配，形成互补关系。"
                });
            } else {
                suggestions.push({
                    title: "性格搭配建议",
                    content: "你性格较为内向，适合与理解你、能给你足够个人空间的伴侣。"
                });
            }
            
            if (personalityTraits.some(trait => ['责任心', '负责', '可靠'].includes(trait.trim()))) {
                suggestions.push({
                    title: "责任感匹配",
                    content: "你有很强的责任心，适合与同样有责任感的伴侣，共同经营稳定关系。"
                });
            }
            
            // 根据兴趣爱好生成建议
            if (hobbies.length > 0) {
                suggestions.push({
                    title: "共同活动建议",
                    content: `你们可以一起参与的活动: ${hobbies.slice(0, 3).join('、')}等。`
                });
            }
            
            // 根据教育背景和收入生成建议
            if (formData.education === '本科' || formData.education === '硕士' || formData.education === '博士') {
                suggestions.push({
                    title: "教育背景建议",
                    content: "考虑到你的教育背景，建议寻找教育程度相当或能欣赏你学识的伴侣。"
                });
            }
            
            if (formData.income === '20-50万' || formData.income === '50-100万' || formData.income === '100万以上') {
                suggestions.push({
                    title: "财务观念建议",
                    content: "你的经济状况良好，建议寻找价值观相近、对财务有相似看法的伴侣。"
                });
            }
            
            // 生成理想伴侣描述
            const idealPartner = [];
            idealPartner.push(`年龄在${parseInt(formData.age)-3}至${parseInt(formData.age)+5}岁之间`);
            idealPartner.push(`教育背景${formData.education}或相近`);
            if (hobbies.length > 0) {
                idealPartner.push(`有${hobbies.slice(0, 2).join('或')}等兴趣爱好`);
            }
            idealPartner.push(`性格特点能与你的"${personalityTraits.length > 0 ? personalityTraits[0] : '个性'}"形成互补或共鸣`);
            
            return {
                percentage: matchPercentage,
                suggestions: suggestions,
                idealPartner: idealPartner,
                formData: formData
            };
        }
        
        // 显示匹配结果弹窗
        function showMatchResult(formData, matchResult) {
            const modalContent = document.getElementById('modal-content');
            
            // 构建结果HTML
            let resultHTML = `
                <div class="match-percentage">
                    <div class="percentage-circle" style="background: conic-gradient(var(--primary) 0% ${matchResult.percentage}%, #eee ${matchResult.percentage}% 100%)">
                        <span class="percentage-value">${matchResult.percentage}%</span>
                    </div>
                    <p style="margin-top: 15px; font-size: 18px;">匹配度极高！你们很可能非常合适</p>
                </div>
                
                <h3><i class="fas fa-user"></i> 你的基本信息</h3>
                <ul>
                    <li>性别: ${formData.gender}</li>
                    <li>年龄: ${formData.age}岁</li>
                    <li>教育背景: ${formData.education}</li>
                    <li>年收入: ${formData.income}</li>
                    <li>居住城市: ${formData.city}</li>
                </ul>
                
                <h3><i class="fas fa-lightbulb"></i> AI分析建议</h3>
            `;
            
            // 添加建议
            matchResult.suggestions.forEach(suggestion => {
                resultHTML += `
                    <p><strong>${suggestion.title}:</strong> ${suggestion.content}</p>
                `;
            });
            
            // 添加理想伴侣描述
            resultHTML += `
                <h3><i class="fas fa-heart"></i> 你的理想伴侣</h3>
                <p>根据你的信息，AI为你推荐以下类型的伴侣：</p>
                <ul>
            `;
            
            matchResult.idealPartner.forEach(item => {
                resultHTML += `<li>${item}</li>`;
            });
            
            resultHTML += `
                </ul>
                
                <div style="margin-top: 30px; padding: 15px; background: rgba(255, 77, 109, 0.1); border-radius: 10px;">
                    <p style="color: var(--primary); font-weight: 600;">
                        <i class="fas fa-comment"></i> AI小贴士: 保持开放心态，有时候最合适的伴侣可能不完全符合你的预期条件。
                    </p>
                </div>
            `;
            
            modalContent.innerHTML = resultHTML;
            
            // 显示弹窗
            document.getElementById('modal-overlay').classList.add('active');
            
            // 保存匹配结果到临时变量
            window.currentMatchResult = matchResult;
        }
        
        // 关闭弹窗
        document.getElementById('close-modal').addEventListener('click', function() {
            document.getElementById('modal-overlay').classList.remove('active');
        });
        
        // 点击弹窗外部关闭
        document.getElementById('modal-overlay').addEventListener('click', function(e) {
            if (e.target === this) {
                this.classList.remove('active');
            }
        });
        
        // 保存匹配结果
        document.getElementById('save-match').addEventListener('click', function() {
            if (window.currentMatchResult) {
                saveToHistory(window.currentMatchResult);
                document.getElementById('modal-overlay').classList.remove('active');
                
                // 显示保存成功提示
                alert('匹配结果已保存到历史记录！');
            }
        });
        
        // 保存到历史记录
        function saveToHistory(matchResult) {
            let history = JSON.parse(localStorage.getItem('matchHistory')) || [];
            
            const historyItem = {
                id: Date.now(),
                date: new Date().toLocaleString(),
                percentage: matchResult.percentage,
                formData: matchResult.formData,
                suggestions: matchResult.suggestions,
                idealPartner: matchResult.idealPartner
            };
            
            history.unshift(historyItem);
            localStorage.setItem('matchHistory', JSON.stringify(history));
        }
        
        // 加载历史记录
        function loadHistory() {
            const history = JSON.parse(localStorage.getItem('matchHistory')) || [];
            const historyList = document.getElementById('history-list');
            
            if (history.length === 0) {
                document.getElementById('no-history').style.display = 'block';
                return;
            }
            
            document.getElementById('no-history').style.display = 'none';
            
            let html = '';
            history.forEach(item => {
                const previewItems = [
                    `${item.formData.gender}`,
                    `${item.formData.age}岁`,
                    `匹配度${item.percentage}%`
                ];
                
                html += `
                    <div class="history-item" data-id="${item.id}">
                        <div class="history-header">
                            <div class="history-title">
                                <i class="fas fa-heart" style="color: ${getPercentageColor(item.percentage)}"></i>
                                匹配记录 #${item.id.toString().slice(-4)}
                            </div>
                            <div class="history-date">${item.date}</div>
                        </div>
                        <div class="history-preview">
                            ${previewItems.map(text => `<div class="history-preview-item">${text}</div>`).join('')}
                        </div>
                        <button class="view-detail-btn">
                            查看详细分析 <i class="fas fa-chevron-down"></i>
                        </button>
                        <div class="history-detail">
                            <h3 style="color: ${getPercentageColor(item.percentage)}; margin-top: 15px;">
                                <i class="fas fa-percentage"></i> 匹配度: ${item.percentage}%
                            </h3>
                            <p><strong>基本信息:</strong> ${item.formData.gender}, ${item.formData.age}岁, ${item.formData.education}, ${item.formData.income}, ${item.formData.city}</p>
                            
                            <h3 style="margin-top: 20px;"><i class="fas fa-lightbulb"></i> AI分析建议</h3>
                            ${item.suggestions.map(suggestion => `<p><strong>${suggestion.title}:</strong> ${suggestion.content}</p>`).join('')}
                            
                            <h3 style="margin-top: 20px;"><i class="fas fa-heart"></i> 理想伴侣描述</h3>
                            <ul>
                                ${item.idealPartner.map(item => `<li>${item}</li>`).join('')}
                            </ul>
                        </div>
                    </div>
                `;
            });
            
            historyList.innerHTML = html;
            
            // 添加查看详情按钮事件
            document.querySelectorAll('.view-detail-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const detailContent = this.nextElementSibling;
                    const icon = this.querySelector('i');
                    
                    if (detailContent.style.display === 'none' || !detailContent.style.display) {
                        detailContent.style.display = 'block';
                        icon.classList.remove('fa-chevron-down');
                        icon.classList.add('fa-chevron-up');
                        this.style.marginBottom = '15px';
                    } else {
                        detailContent.style.display = 'none';
                        icon.classList.remove('fa-chevron-up');
                        icon.classList.add('fa-chevron-down');
                        this.style.marginBottom = '0';
                    }
                });
            });
        }
        
        // 根据匹配百分比获取颜色
        function getPercentageColor(percentage) {
            if (percentage >= 90) return '#FF4D6D';
            if (percentage >= 80) return '#FF758F';
            if (percentage >= 70) return '#FF8FA3';
            return '#FFB3C1';
        }
        
        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            createHearts();
            
            // 检查是否有hash值直接跳转到对应页面
            if (window.location.hash) {
                const pageId = window.location.hash.substring(1);
                const navLink = document.querySelector(`.nav-link[data-page="${pageId}"]`);
                if (navLink) {
                    navLink.click();
                }
            }
        });
    </script>
</body>
</html>